@import './variable.styl'
.app {
  width 1000px
  margin 0 auto 
}
h1 {
  text-align center
  margin 20px 0 50px 0
  color #5c5c5c
  z-index 101
}
h2 {
  text-align center
  color #777
  margin 20px 0
}
.chart-container {
  width 800px
  overflow hidden
  margin 40px auto
  .statis-chart {
    width 800px
    height 400px
  }
  .year-max-desc {
    margin 10px 0
    p {
      line-height 22px
      font-size 18px
    }
    .max-year {
      font-size 14px
      margin 5px 0 10px
      span {
        margin-left 5px
      }
      i {
        font-style normal
        padding-right 5px
      }
    }
  }
}

.month-container {
  width 800px
  margin auto
  p {
    font-size 18px
    color #333
    font-size 16px
  }
  a {
    display inline-block
    margin-right 10px
    color #00f
    font-size 14px
    &:hover {
      text-decoration underline !important
    }
  }
}

.top-container {
  width 800px
  margin 20px auto
  padding 15px 0
  .top-title {
    color #333
  }
  .top-item {
    margin 10px 0 15px
  }
  .top-desc {
    padding-bottom 5px
    margin-bottom 5px
    border-bottom 1px solid #ccc
    font-size 16px
  }

  li {
    list-style none
    padding 6px 0
  }
  .count {
    margin-left 5px
  }
  i {
    display inline-block
    width 60px
    margin-right 5px
    font-style normal
    
  }
}

.article-container {
  li {
    i {
      display inline-block
      min-width 50px
      &.month {
        width 65px
      }
    }
  }
  .cmt-articles {
    li i {
      color #f60
    }
  }
}
